<template>
  <!-- 报告路况 -->
  <div class="report-road" @click="handleClick">报告路况</div>
  <div v-show="never">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <h3>报告路况</h3>
        </div>
      </template>
      <span>事件类型</span>
      <el-select
        v-model="value"
        placeholder="请选择事件类型"
        size="large"
        style="width: 280px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select
      ><br />
      <span>事件地址</span>
      <el-input-tag
        v-model="input1"
        placeholder="Please input"
        aria-label="Please click the Enter key after input"
      /><br />
      <span>建筑标识</span>
      <el-input-tag
        v-model="input2"
        placeholder="Please input"
        aria-label="Please click the Enter key after input"
      /><br />
      <div class="block">
        <span class="demonstration">发生时间</span>
        <el-date-picker
          v-model="input3"
          type="datetime"
          placeholder="Select date and time"
          style="width: 280px"
        />
      </div>
      <br />
      <span>事件描述</span>
      <el-input-tag
        v-model="input4"
        placeholder="Please input"
        aria-label="Please click the Enter key after input"
      />
      <template #footer>
        <el-button type="primary">确定</el-button>
        <el-button type="info">取消</el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const never = ref(false);
const value = ref('');
const input1 = ref();
const input2 = ref();
const input3 = ref();
const input4 = ref();

const options = [
  {
    value: 'Option1',
    label: '碰撞',
  },
  {
    value: 'Option2',
    label: '刮擦',
  },
  {
    value: 'Option3',
    label: '碾压',
  },
  {
    value: 'Option4',
    label: '追尾',
  },
  {
    value: 'Option5',
    label: '超车',
  },
  {
    value: 'Option6',
    label: '失火',
  },
  {
    value: 'Option7',
    label: '其他',
  },
];

function handleClick() {
  never.value = !never.value;
  console.log(never.value);
}
</script>

<style scoped lang="scss">
.report-road {
  cursor: pointer;
}
.el-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-input-tag,
  .block {
    // 块变行
    display: inline-block;
  }
}
</style>
